<template>
  <div class="list">
    <ul class="list-promote">
      <p class="list-title">
        <span class="iconfont">&#xe64f;</span>
        去哪儿推荐
      </p>
      <detail-list-item v-for="item in promoteList"
        :key="item.id"
        :ticketInfo="item"/>
    </ul>
    <ul class="list-tickets">
      <li v-for="type in ticketList"
        :key="type.id">
        <p class="title border-bottom">
          <span class="iconfont">&#xe659;</span>
          {{ type.title }}
        </p>
        <ul v-for="group in type.children"
          :key="group.id">
          <li>
            <detail-list-group :groupInfo="group"/>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import DetailListItem from './DetailListItem'
import DetailListGroup from './DetailListGroup'
export default {
  name: 'DetailList',
  components: {
    DetailListItem,
    DetailListGroup
  },
  props: {
    promoteList: Array,
    ticketList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .list
    background #f5f5f5
    .list-promote
      margin .1rem 0
      background #fff
      .list-title
        line-height $headerHeight
        font-size .32rem
        padding-left .2rem
        .iconfont
          color $bgColor
    .list-tickets
      .title
        line-height $headerHeight
        padding-left .2rem
        font-size .32rem
        color #333
        background #fff
        .iconfont
          color $bgColor
</style>
